<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Designer</title>
    <link rel="stylesheet" href="/static/home/css/reset.css">
    <style>
        * {
            -webkit-tap-highlight-color: transparent;
        }
        .main {
            /* width: 1000px; */
            padding-top: 40px;
            margin: auto;
        }

        .top {
            display: flex;
            /* justify-content: space-between; */
        }

        .left {
            margin: 0 200px;
        }

        .left>a {
            display: block;
            font-size: 20px;
            color: #333;
        }

        .left>.active {
            font-size: 24px;
            font-weight: bold;
        }

        .right{
            flex: auto;
        }

        .list-box {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            /* width: 600px; */
            padding-top: 60px;
            margin: 0 200px 0 0;
        }

        .list-box .session {
            position: absolute;
            left: 0;
            top: -20px;
            font-size: 100px;
            font-weight: bold;
            z-index: 0;
        }

        .list-box>.member {
            z-index: 1;
            margin-left: 20px;
            margin-bottom: 20px;
            transition: all .3s;
        }

        .list-box>.member:hover {
            transform: scale(1.1);
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
        }

        .list-box>.member img {
            height: 100%;
            width: 100%;
        }

        .detail {
            overflow: hidden;
            width: 600px;
            margin-top: 30px;
            word-break: break-all;
            word-wrap: break-word;
        }

        .detail .txt {
            padding: 0 0 30px;
        }

        .detail img {
            display: block;
            padding: 30px 0;
            margin: 0 auto;
        }
    </style>
    <style>
        @media screen and (max-width: 420px) {
            .top{
                display: block;
            }
            .left{
                margin: 10px;
                text-align: center;
            }
            .left>a{
                display: inline-block;
                padding: 4px 10px;
            }
            .list-box{
                margin: 0;
                padding-right: 10px;
            }
            .list-box>.member{
                width: 33.33%;
                padding: 0 0 10px 10px;
                box-sizing: border-box;
                margin: 0;
            }
            .list-box>.member:hover {
                transform: scale(1);
                box-shadow: none;
            }
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="top">
            <div class="left">
                {volist name='year_list' id='vo'}
                <a href="{:url('designer',array('year'=>$vo))}" class="session {eq name=":input('year')" value="$vo"}active{/eq}">{$vo}</a>
                {/volist}
            </div>
            <div class="right">
                <div class="list-box">
                    <div class="session">{$year}</div>
                    {volist name='data' id='value'}
                    <a href="javascript:;" class="member js-member" data-id="{$value.id}" title="{$value.username}">
                        <img src="{$value.avatar}" alt="{$value.username}" >
                    </a>
                    {/volist}
                </div>
                <div class="detail">
                    <?php echo $desc;?>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="/static/home/js/jquery.min.js"></script>
<script>
    // $('.js-member').click(function(){
    //     var id=$(this).attr('data-id');
    //     $.post("{:url('detail')}",{id:id},function (data) {
    //         console.log(data.description)
    //         $('.detail').html(data.description);
    //     },'json');

    // });
</script>